<template>
  <div class="MYbox" v-if="playlist">
        <div class="MYboxtitle" :style="{backgroundColor:'rgba(255,255,255,'+opcy+')'}">
            <span class="iconfont icon-xiangzuojiantou arrowLeft"  @click="back"></span>
            <span class="MTname" :style="{opacity:opcy}">{{nickname}}</span>
        </div>
        <div class="bgimg" :style="{'background-image':'url('+backgroundUrl+')'}">
            <div class="personage">
                <div class="img">
                    <img :src="img" alt="">
                </div>
                    <!-- <van-button type="primary">基础用法</van-button> -->
                <div class="personageContent">
                    <h3>{{nickname}}</h3>
                    <div class="grade">
                        <!-- <span @click="UFbtn">{{follows}} 关注</span> -->
                        <router-link tag="span" to="/my/myAttention">{{follows}}&nbsp;关注</router-link>
                        <span>{{followeds}} 粉丝</span>
                        <span>Lv.{{level}}</span>
                    </div>
                    <div class="location">
                        <span>广西 百色</span>
                        <span>村龄4年</span>
                    </div>
                    <!-- <div class="data">
                        <span>编辑资料</span>
                        <span class="iconfont icon-xiajiantou ardown"></span>
                    </div> -->
                </div>
                <van-sticky :offset-top="40">
                    <div class="optionTitle"  :style="{backgroundColor:'rgba(255,255,255,'+opcy+')'}"><!-- ref="backTop" -->
                        <div class="opBox">
                            <span :class="{active:type=='主页'}" @click="toggle">主页</span>

                            <!-- <router-link to="/homepage" tag="span" class="active">主页</router-link> -->
                            <span :class="{active:type=='动态'}" @click="toggle">动态</span>
                            <span :class="{active:type=='博客'}" @click="toggle">博客</span>
                            <!-- <van-tabs animated>
                                <van-tab title="主页">
                                    内容1
                                </van-tab>
                                <van-tab title="动态">
                                    内容2
                                </van-tab>
                                <van-tab title="博客">
                                    内容3
                                </van-tab>
                            </van-tabs> -->
                        </div>
                    </div>
                </van-sticky>
                <home-page
                    :listenSongs = 'listenSongs'
                    :createDays = 'createDays'
                    :subPlaylistCount = 'subPlaylistCount'
                    :myLikelist = 'myLikelist'
                    :creatPlaylist = 'creatPlaylist'
                    :collectPlaylist = 'collectPlaylist'
                    v-show="type=='主页'"
                ></home-page>
                <div class="dystate" v-show="type=='动态'">
                    <p>暂时还没有动态</p>
                </div>
                <div class="blogs" v-show="type=='博客'">
                    <div class="blogsImg">
                        <img src="" alt="">
                    </div>
                    <div class="blogsContent">
                        <h4>暂无声音</h4>
                        <p>开始录制你的第一条声音吧</p>
                        <div class="blogsBtn">
                            去录制
                        </div>
                    </div>
                </div>
            </div>
        </div>
  </div>
</template>

<script>
import {getUserDetai,getUserSubcount,getUserPlaylist} from '../api/my';
import homePage from '../components/homePage.vue';
import Vue from 'vue';
import { Sticky } from 'vant';
Vue.use(Sticky);
export default {
    data(){
      return{
        opcy:0,// 透明属性
        nickname:"",// 用户名
        img:"",// 图片
        followeds:"",// 粉丝
        follows:"",// 关注
        level:"",//等级
        listenSongs:"",// 累计听歌
        createDays:"",// 村龄
        subPlaylistCount:"",// 歌单数据
        backgroundUrl:"",// 背景图片
        playlist:[],// 获取歌单数据
        myLikelist:[],// 我喜欢的歌单
        creatPlaylist:[],// 创建歌单
        collectPlaylist:[],// 收藏歌单
        type:'主页',// 类型
        color:"#f3f3f3",
      }  
    },
    methods:{
        // // 点击获取我的关注按钮
        // UFbtn(){
        //     this.getUserFollowsFun();
        // },
        // // 获取我的关注接口
        // getUserFollowsFun(){
        //     getUserFollows({uid:window.localStorage.uid}).then(data=>{
        //         console.log(data)
        //     })
        // },
        // 返回推荐页面
        back(){
            this.$router.push("/recommend");
        },
        // 切换页面
        toggle(e){
            this.type = e.target.textContent;
            if(this.type!='主页'){
                window.document.body.style.backgroundColor='#fff';
            }else{
                window.document.body.style.backgroundColor='#f3f3f3';
            }
        },
        // bgc(){
        //     window.document.body.style.backgroundColor=this.color;
        // },
        // 获取滚动数据实现渐变
        handleScroll(){
            let height = window.pageYOffset;
            // let top = this.$refs.backTop.getBoundingClientRect().top;
            // console.log('滚动高度',height)
            // console.log('距离顶部高度',top);
            this.opcy = height > 352? 1 : 0;
            // console.log('用户信息=>',this.playlist)
            // console.log(window.localStorage,window.localStorage.uid,this.getUserDetaiFun())
        },
        // 获取用户详情
        getUserDetaiFun(){
            getUserDetai({uid:window.localStorage.uid}).then(data=>{
                console.log('获取用户详情',data)
                this.nickname = data.profile.nickname;
                this.img = data.profile.avatarUrl;
                this.followeds = data.profile.followeds;
                this.follows = data.profile.follows;
                this.backgroundUrl = data.profile.backgroundUrl;
                this.level = data.level;
                this.listenSongs = data.listenSongs;
                this.createDays = data.createDays;
                // console.log("window",window.localStorage.uid)
            })
        },
        // 获取用户信息
        getUserSubcountFun(){
            getUserSubcount().then(data=>{
                this.subPlaylistCount = data.subPlaylistCount;
            })
        },
        // 获取用户歌单
        getUserPlaylistFun(){
            getUserPlaylist({uid:window.localStorage.uid}).then(data=>{
                this.playlist = data.playlist
                // console.log('更新歌单',data.playlist)
                this.playlist.forEach((item,index)=>{
                    if(index == 0){
                        this.myLikelist.push(item);
                    }
                    else if(index == 1){
                        this.creatPlaylist.push(item)
                    }
                    else if(index>=2){
                        this.collectPlaylist.push(item);
                    }
                })
                console.log(this.myLikelist,this.creatPlaylist,this.collectPlaylist)
            })
        }
    },
    created(){
        window.document.body.style.backgroundColor='#f3f3f3';
    },
    mounted(){
        window.addEventListener('scroll',this.handleScroll,true)
        this.getUserDetaiFun();// 获取用户详情
        this.getUserSubcountFun();// 获取用户信息
        this.getUserPlaylistFun();// 获取用户歌单
    },
    watch:{

    },
    components:{
        homePage,
    }
}
</script>

<style lang="less">
body{
    background-color: #f3f3f3;
    transition: all .2s linear;
}
.MYbox{
    width: 100%;
    height: 100%;
    .MYboxtitle{
        position: fixed;
        width: 100%;
        z-index: 5;
        padding: 10px;
        background-color: #fff;
        transition: all .1s linear;
        .arrowLeft{
            line-height: 19px;
            color: #cdcdce;
            margin-right: 10px;
        }
        .MTname{
            line-height: 20px;
            font-weight: 700;
            transition: all .1s linear;
        }
    }
    .bgimg{
        width: 100%;
        height: 250px;
        background-color:pink;
        position: relative;
        background-size: 100%;
        // background-position:0% 60%;
        // border-radius: 0px 0px 10px 10px;
        .personage{
            position: absolute;
            width: 94%;
            height: 168px;
            background-color: #fff;
            top: 90%;
            left: 3%;
            border-radius: 10px;
            font-size: 13px;
            opacity: 0.9;
            .img{
                position: absolute;
                top: -20%;
                left: 40%;
                width: 70px;
                height: 70px;
                margin: 0px auto;
                border-radius: 50%;
                overflow: hidden;
                img{
                    width: 100%;
                }
            }
            .personageContent{
                margin-top: 60px;
                text-align: center;
                text-align: center;
                margin-bottom:15px ;
                h3{
                    font-weight: 700;
                    font-size: 18px;
                }
                .grade{
                    color: #a0a0a0;
                    margin: 10px 0px;
                    span{
                        padding: 0px 10px;
                    }
                    span:nth-child(2){
                        border-left: 1px solid #dddddd;
                        border-right: 1px solid #dddddd;
                    }
                }
                .location{
                    margin: 20px 0px;
                    span{
                        margin: 0px 5px;
                        border: 1px solid #dddddd;
                        padding: 4px;
                        border-radius: 6px;
                    }
                }
                .data{
                    margin-top: 22px;
                    span{
                        padding: 7px 10px;
                        border: 1px solid #dddddd;
                        border-radius: 20px;
                        margin: 5px;
                    }
                    .ardown{
                        padding: 7px 7px;
                        font-size: 12px;
                    }
                }
            }
            .optionTitle{
                width: 100%;
                padding: 10px 0px;
                transition: all .2s linear;
                .opBox{
                    font-size: 16px;
                    display: flex;
                    justify-content: space-around;
                    span{
                        position: relative;
                        color: #676767;
                    }
                    span::after{
                        background-color: #fd3535b6;
                        content: '';
                        padding: 3px 18px;
                        position: absolute;
                        bottom: 0px;
                        left: -2px;
                        border-radius: 6px;
                        display: none;
                        z-index: 1;
                    }
                    span.active{
                        color: #333;
                        font-weight: 700;
                        z-index: 10;
                    }
                    span.active::after{
                        display: block;
                    }
                }
            }
            .dystate{
                text-align: center;
                padding-top: 30px;
                height: 580px;
            }
            .blogs{
                height: 575px;
                text-align: center;
                .blogsImg{
                    width: 60%;
                    height: 20%;
                    background-color: pink;
                    margin: 30px auto;
                    img{
                        width: 100%;
                    }
                }
                .blogsContent{
                    line-height: 30px;
                    h4{
                        font-weight: bold;
                        font-size: 14px;
                    }
                    p{
                        color: #a0a0a0;
                    }
                    .blogsBtn{
                        width: 60px;
                        background-color: red;
                        margin: 0px auto;
                        margin-top: 10px;
                        padding: 0px 20px;
                        border-radius: 20px;
                        color: white;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>